<template>
    <!--v-for循环概念
    语法：三种模式
    1.基本形式 v-for="别名 in 数组"
    2.带索引 v-for="(别名,index) in 数组"
    3.带索引和key v-for="(别名,index) in 数组" :key="index"
    -->
    <h1>学生管理系统</h1>
    <div>
        <span>学生姓名：</span>
        <ul>
            <li v-for="(item,index) in students">
                {{ item }} -- {{ index }}
            </li>
        </ul>
        <span>学生详情信息：</span>
        <ul>
            <!--v-for口诀： 哪个标签需要循环数据就在哪个标签上进行循环操作-->
            <li v-for="(obj,index) in stuinfo" :key="obj">
                {{ obj.name }} --{{ index }}
                {{ obj.age }}--
                {{ obj.sex }}--
                {{ obj.hobby }}
            </li>
        </ul>
        <span>教师信息：</span>
        <div v-for="(val,key) in teachers" :key="key">
           {{ key }} == {{ val }}
        </div>
    </div>


</template>

<script setup>
import { reactive, ref } from 'vue'
const students = ref(["叶凡", "萧炎", "美杜莎", "萧薰儿"])
const stuinfo = ref([
    { name: '叶凡', age: 18, sex: '男', hobby: '抢源石' },
    { name: '萧炎', age: 18, sex: '男', hobby: '炼丹' },
    { name: '美杜莎', age: 28, sex: '女', hobby: '萧炎' },
    { name: '萧薰儿', age: 18, sex: '女', hobby: '萧炎' }
])
const teachers = reactive(
    {
        id: '101',
        name: '药老',
        age: 108,
        class: "星辰阁"
    }
)

</script>

<style lang="scss" scoped>

</style>